<template>
  <div id="secondaryIndicators" class="secondaryIndicators"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data(){
    return{
    }
  },
  mounted() {
    this.initEcharts()
  },
  methods:{
    initEcharts(){
      let myData = [
        { name: '发展战略规划', value: 83 },
        { name: '重大政策及决策部署落实', value: 91 },
        { name: '执行财经法规', value: 45 },
        { name: '贯彻上级决策', value: 100 },
        { name: '项目投资管理', value: 78 },
        { name: '招标采购管理', value: 78 },
        { name: '人力资源管理', value: 78 },
        { name: '物资管理', value: 78 },
        { name: '内控风险管理', value: 78 },
        { name: '电力营销', value: 78 },
        { name: '履行尽责方面', value: 78 },
        { name: '廉洁从业方面', value: 78 },
      ]

      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('secondaryIndicators'));
      let colors = ['#357aba','#80ffa4','#91a568','#3552ba','#02a7f0'];
      let colors2 = ['#f19477','#68d07f','#81b9eb','#d391eb','#f19477','#95a8ee','#fcb49d','#68d07f','#f6c18f','#98c6f1','#aaaaaa','#68d07f'];
      let indicator = myData.map(res => {
        return{
          name: res.name,
          max: 120
        }
      })
      let option = {
        radar: {
          indicator,
          splitNumber: 6,
          startAngle: 126,    //旋转
          shape: 'circle',
          splitArea: {                        // 坐标轴在 grid 区域中的分隔区域，默认不显示。
            show: true,
            areaStyle: {                            // 分隔区域的样式设置。
              color: ['#31b0b5'],       // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
            }
          },
          radius: '55%',
          name: {
            formatter: function() {
              return '';
            }
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['75%', '95%'],
            avoidLabelOverlap: false,
            hoverAnimation:false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: [
              {name: '战略决策类',value: 20},
              {name: '贯彻执行类',value: 20},
              {name: '管理控制类',value: 60},
              {name: '担当作为类',value: 10},
              {name: '廉洁从业类',value: 10},
            ],
            itemStyle: {
              color: function (params) {
                // 根据数据项的索引返回不同的颜色
                return colors[params.dataIndex];
              },
              normal: {
                label:{
                  color: '#ffffff',
                  show:true,
                  formatter: "{b}",
                  position: "inside",
                  rotate: 'tangential',
                }
              }
            }
          },
          {
            type: 'pie',
            radius: ['55%', '75%'],
            avoidLabelOverlap: false,
            hoverAnimation:false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: myData.map(res => {
              return{
                value: 10,
                name: res.name
              }
            }),
            itemStyle: {
              color: function (params) {
                // 根据数据项的索引返回不同的颜色
                return colors2[params.dataIndex];
              },
              normal: {
                label:{
                  color: 'black',
                  show:true,
                  position: "inside",
                  rotate: 'tangential',
                  formatter: function(params) {
                    const length = params.name.length;
                    let str = params.name
                    if (length == 6) {
                      const middleIndex = 4;
                      str = params.name.slice(0, middleIndex) + '\n' + params.name.slice(middleIndex);
                    }
                    if (length > 6){
                      const middleIndex = Math.floor(length / 2);
                      return str.slice(0, middleIndex) + '\n' + str.slice(middleIndex);
                    }
                    return str
                  }
                }
              }
            }
          },
          {
            type: 'radar',
            data: [
              {
                value: myData.reverse().map(res => {
                  return res.value
                }),
              },
            ],
            itemStyle: {
              normal: {
                color: "#ffffff",
                width:1
              }
            },
            label: {
              normal: {
                color: '#ffffff',
                show: true,
                formatter:function(params) {
                  return params.value + '%';
                }
              }
            }
          },
        ],
      };
      myChart.setOption(option);
    },
  }
}
</script>

<style scoped>
.secondaryIndicators{
  width: 100%;
  height: 95%;
}
</style>
